<template>
  <div id="backtop" class="pages-content-scroll">
    <!--
      visibility-height	滚动高度达到此参数值才出现 默认 200px
      right	控制其显示位置, 距离页面右边距 默认 40px
      bottom	控制其显示位置, 距离页面底部距离 默认 40px
    -->
    <el-backtop target=".pages-content-scroll" :right="50" :bottom="50">
      <!-- 可以自定义显示内容 -->
      <div class="style">
        <i class="el-icon-caret-top" />
      </div>
    </el-backtop>
    <slot />
  </div>
</template>
<script>
export default {
  name: 'BackTop'
}
</script>

<style scoped lang="scss">
// 必须撑满整个屏幕
.pages-content-scroll {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
}

// 自定义显示样式
.style {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: #ececec;
  text-align: center;
  line-height: 40px;
  color: #0c81ee;
}
</style>
